<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/common/taglibs.jsp"%>
<html lang="en">
<head>
<title>Broker</title>
<link rel="stylesheet" type="text/css"
	href="resources/css/bootstrap.min.css" />
</head>
<body>
	<nav class="navbar navbar-default" role="navigation">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Broker Management System</a>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
	<div class="container">
		<a href="formInsertNew" type="button" class="btn btn-primary">
			<span class="glyphicon glyphicon-plus"></span> Add new Broker
		</a>
		<br><br>
		<div class="panel panel-primary">
		  <!-- Default panel contents -->
		  <div class="panel-heading">List Broker</div>
		
		  <!-- Table -->
		  <table class="table table-hover table-bordered">
			<thead>
				<tr class="info">
					<th>ID Broker</th>
					<th>Nama</th>
					<th>Alamat</th>
					<th>Saldo Uang</th>
					<th>Saldo Saham</th>
					<th>Tindakan</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="brokers" items="${brokers}"> 
					<tr>
						<td>${brokers.idBroker}</td>
						<td>${brokers.namaBroker}</td>
						<td>${brokers.alamat}</td>
						<td>${brokers.saldoUang}</td>
						<td>${brokers.saldoSaham}</td>
						<td>
							<a href="formUpdateBroker/id/${brokers.idBroker}">
								<button type="button" class="btn btn-default" title="Edit">
									<span class="glyphicon glyphicon-pencil"></span>
								</button>
							</a>&nbsp;&nbsp;&nbsp;&nbsp; <!-- Button trigger modal -->
							<button type="button" class="btn btn-warning" data-toggle="modal"
								data-target="#myModal${brokers.idBroker}" title="Hapus">
								<span class="glyphicon glyphicon-remove"></span>
							</button>
							 <!-- Modal -->
							<div class="modal fade" id="myModal${brokers.idBroker}" tabindex="-1" role="dialog"
								aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal">
												<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
											</button>
											<h4 class="modal-title" id="myModalLabel">
												<span class="glyphicon glyphicon-trash"></span> Konfirmasi
												Penghapusan
											</h4>
										</div>
										<div class="modal-body">Apakah Anda yakin ingin
											menghapus data ini?</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default"
												data-dismiss="modal">Tidak</button>
											<a href="deleteBroker/id/${brokers.idBroker}"
												class="btn btn-warning">Ya</a>
										</div>
									</div>
								</div>
							</div>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		</div>

	</div>

	<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
	  <div class="container">
	  	<br>
	    <span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span>
	    &nbsp;2014 telkomsigma
	  </div>
	</nav>

	<!-- Javascript -->
	<script type="text/javascript" src="resources/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="resources/js/bootstrap.min.js"></script>
</body>
</html>
